<template>
  <div class="container" :style="backgroundColor">
    <!-- 标题 -->
    <div class="main" :style="headerBorderSrc">
      <div class="logo">
        <img :src="logoSrc" />
      </div>
      <div class="title" :style="titleColor">电商平台实时监控系统</div>
      <div class="time">
        <img :src="themeSrc" alt="" @click="themeSwitch" />
        <span :style="titleColor">{{ time }}</span>
      </div>
    </div>
    <!-- 地图 -->
    <!-- largen:变大 -->
    <div class="content">
      <!-- 如果fullScreenStatus中的trend字段为true就添加类名fullScreen否则为空 -->
      <!-- fullScreen类名的样式就是全屏效果的样式 -->
      <div class="box1" :class="[fullScreenStatus.trend ? 'fullScreen' : '']">
        <!-- 地区销量趋势 -->
        <Trend ref="trend"></Trend>
        <div class="largen" @click="fullScreenHandle('trend')">
          <!-- 
            icon-compress-alt: 缩小
            icon-compress-alt: 放大
            -->
          <span :style="pointStyle" class="iconfont" :class="[
            fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
      <!-- 商家分布 -->
      <div class="box2" :class="[fullScreenStatus.map ? 'fullScreen' : '']">
        <Map ref="map"></Map>
        <div class="largen" @click="fullScreenHandle('map')">
          <span class="iconfont" :class="[
            fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
      <!-- 热销商品占比 -->
      <div class="box3" :class="[fullScreenStatus.hot ? 'fullScreen' : '']">
        <Hot ref="hot"></Hot>
        <div class="largen" @click="fullScreenHandle('hot')">
          <span class="iconfont" :class="[
            fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
      <!-- 商家销售统计 -->
      <div class="box4" :class="[fullScreenStatus.seller ? 'fullScreen' : '']">
        <Seller ref="seller"></Seller>
        <div class="largen" @click="fullScreenHandle('seller')">
          <span class="iconfont" :class="[
            fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
      <!-- 地区销售排行 -->
      <div class="box5" :class="[fullScreenStatus.rank ? 'fullScreen' : '']">
        <Rank ref="rank"></Rank>
        <div class="largen" @click="fullScreenHandle('rank')">
          <span class="iconfont" :class="[
            fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
      <!-- 库存和销量分析 -->
      <div class="box6" :class="[fullScreenStatus.stock ? 'fullScreen' : '']">
        <Stock ref="stock"></Stock>
        <div class="largen" @click="fullScreenHandle('stock')">
          <span class="iconfont" :class="[
            fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt',
          ]"></span>
        </div>
      </div>
    </div>
  </div>
</template>

// Ctrl alt shift F6  sljz123456

<script>
import Trend from "@/components/Trend.vue";
import Map from "@/components/Map.vue";
import Hot from "@/components/Hot.vue";
import Seller from "@/components/Seller.vue";
import Rank from "@/components/Rank.vue";
import Stock from "@/components/Stock.vue";
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_utils.js";
export default {
  name: "Screen",
  components: {
    Trend,
    Map,
    Hot,
    Seller,
    Rank,
    Stock,
  },
  data() {
    return {
      // 定义一个图表的全屏状态
      fullScreenStatus: {
        trend: false,
        map: false,
        hot: false,
        seller: false,
        rank: false,
        stock: false,
      },
      time: ''
    };
  },
  created() {
    this.$socket.registerCallBack("fullScreen", this.recvData);
    this.$socket.registerCallBack('themeChange', this.recvThemeData)
    this.getTime()
  },
  destoryed() {
    this.$socket.unRegisterCallBack("fullScreen");
    this.$socket.unRegisterCallBack("themeChange");
  },
  methods: {
    fullScreenHandle(chartName) {
      // 1.改变fullScreenStatus的数据
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName] // 数据取反
      // 2.需要调用每一个图表组件的screenAdapt方法
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapt()
      // })
      // zoomquilt.org

      // 实现联动效果(将数据发送给服务端，服务端再将数据推送给前端)(多个浏览器打开这个页面都会显示全屏或非全屏)
      const targetValue = !this.fullScreenStatus[chartName];
      this.$socket.send({
        action: "fullScreen",
        socketType: "fullScreen",
        chartName: chartName, //kv一致可以省略v（此处我不想省略，好阅读）
        value: targetValue,
      });
    },
    // 处理服务端返回的数据，进行全屏切换
    recvData(data) {
      console.log("recvdata被执行了!", data);
      // 取出是哪一个图表需要进行切换
      const chartName = data.chartName;
      // 取出，切换成什么状态
      const targetValue = data.value;
      this.fullScreenStatus[chartName] = targetValue; // 数据取反
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapt();
      });
    },
    // 主题切换
    themeSwitch() {
      // this.$store.commit('changeTheme')

      // 实现主题切换的联动效果
      this.$socket.send({
        action: "themeChange",
        socketType: "themeChange",
        chartName: "",
        value: this.theme,
      });
    },
    // 接收到服务端推送的数据之后执行vuex中的changeTheme函数，从而实现联动效果
    recvThemeData() {
      this.$store.commit('changeTheme')
    },
    // 时间
    getTime() {
      setInterval(() => {
        let time = new Date()
        this.time = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
      }, 1000)
    }
  },
  computed: {
    ...mapState(["theme"]),
    pointStyle() {
      return {
        color: getThemeValue(this.theme).pointStyle,
      };
    },
    titleColor() {
      return {
        color: getThemeValue(this.theme).titleColor,
      };
    },
    logoSrc() {
      return "/static/img/" + getThemeValue(this.theme).logoSrc;
    },
    themeSrc() {
      return "/static/img/" + getThemeValue(this.theme).themeSrc;
    },
    headerBorderSrc() {
      return {
        backgroundImage:
          "/static/img/" + getThemeValue(this.theme).headerBorderSrc,
      };
    },
    backgroundColor() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
      };
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  min-width: 1240px;
  box-sizing: border-box;
  padding: 5px 20px;

  .main {
    width: 100%;
    height: 60px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;

    .logo {
      // height: 30px;
      width: 33.3%;

      img {
        max-width: 35%;
      }
    }

    .title {
      width: 33.3%;
      color: #fff;
      font-size: 23px;
      text-align: center;
      padding-top: 15px;
    }

    .time {
      width: 33.3%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: 15px;

      img {
        margin-right: 5px;
        cursor: pointer;
      }

      span {
        color: #fff;
      }
    }
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    // position: relative;

    .box1 {
      width: 30%;
      height: 55%;
      border-radius: 20px;
      margin-top: 20px;
      position: relative;
    }

    .box2 {
      width: 43%;
      height: 52%;
      border-radius: 20px;
      margin-top: 20px;
      position: relative;
    }

    .box3 {
      width: 23%;
      height: 45%;
      border-radius: 20px;
      margin-top: 20px;
      position: relative;
    }

    .box4 {
      width: 30%;
      height: 30%;
      border-radius: 20px;
      position: relative;
    }

    .box5 {
      width: 40%;
      height: 30%;
      border-radius: 20px;
      margin-bottom: 65px;
      position: relative;
    }

    .box6 {
      width: 25%;
      height: 30%;
      border-radius: 20px;
      position: relative;
    }
  }
}

.largen {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;

  span {
    margin-right: 5px;
    cursor: pointer;
  }
}

.fullScreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999;
}

.fontStyle {
  color: red;
}
</style>